<template>
    <div>
        <div ref="mapContainer" style="width:100%; height:600px;"></div>
        <button @click="goBack" v-if="levelStack.length > 0">返回上一级</button>
        <tlbs-map api-key="566BZ-M6LC4-2QAUW-KESD6-WN2WJ-3NF4R" :center="mapCenter" :zoom="zoom">
            <!-- <tlbs-multi-marker :geometries="markers" /> -->
        </tlbs-map>
    </div>
</template>

<script>
import axios from 'axios'
import * as echarts from 'echarts'

export default {
    name: 'BiTMapChart',
    data() {
        return {
            chart: null,
            levelStack: [], // 层级栈（记录adcode）
            currentAdcode: '100000',
            mapCenter: {
                lat: 39.9,
                lng: 116.4
            },
            zoom: 12,
            markers: []
        }
    },
    created() {
        // 组件创建时初始化数据
        this.initMapData()
    },
    mounted() {
        this.chart = echarts.init(this.$refs.mapContainer);
        // 组件挂载后执行地图相关操作
        this.initMap('100000')
    },
    beforeDestroy() {
        // 组件销毁前清理资源
        this.cleanupMap()
    },
    methods: {
        async loadGeoJson(adcode) {
            console.log(adcode,"aaaaaaaaaaaaaaaaaa")
            this.$jsonp('https://apis.map.qq.com/ws/district/v1/getchildren?', {
                key: '3IJBZ-BR6LZ-DFLXB-7UGKO-XLLB5-QAFG7',
                id: adcode,
                output: 'jsonp'
            }).then(res => {
                console.log(adcode,res)
            })
            // const response = await axios.get(`https://apis.map.qq.com/ws/district/v1/getchildren?key=566BZ-M6LC4-2QAUW-KESD6-WN2WJ-3NF4R&id=${adcode}`);
            // return response.data.result[0]; // 腾讯API返回的GeoJSON结构
        },
        async initMap(adcode) {
            const geoData = await this.loadGeoJson(adcode);
            echarts.registerMap(adcode, geoData);
            const option = {
                series: [{
                    type: 'map',
                    map: adcode,
                    roam: true,
                    label: { show: true },
                    emphasis: { itemStyle: { areaColor: '#FFD700' } }
                }]
            };
            this.chart.setOption(option);
            this.currentAdcode = adcode;
            // 初始化地图相关操作
            console.log('地图初始化完成')
        },
        goBack() {
            if (this.levelStack.length === 0) return;
            const prevAdcode = this.levelStack.pop();
            this.initMap(prevAdcode);
        },
        cleanupMap() {
            // 清理地图相关资源
            this.markers = []
        }
    }
}
</script>

<style lang="scss" scoped></style>
